import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

import registerServiceWorker from './registerServiceWorker';

import { Affix, Layout } from 'antd';

import asyncComponent from './Component/AsyncComponent';

import Head from './Component/Head';
import Foot from './Component/Foot';

import './index.less';


class App extends Component {
  render() {
    return (
      <Layout className='web-container'>
        <Affix className="affix-header">
          <Layout.Header>
            <Head page="product0" />
          </Layout.Header>
        </Affix>
        <Layout.Content>
          {this.props.children}
        </Layout.Content>
        <Layout.Footer>
          <Foot />
        </Layout.Footer>
      </Layout>
    );
  }
}

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={asyncComponent(() => import('./Home/Home'))} />
      <Route path="/server" component={asyncComponent(() => import('./Product/Server'))} />
      <Route path="/disk" component={asyncComponent(() => import('./Product/Disk'))} />
      <Route path="/firewall" component={asyncComponent(() => import('./Product/Firewall'))} />
      <Route path="/storage" component={asyncComponent(() => import('./Product/Storage'))} />
      <Route path="/balance" component={asyncComponent(() => import('./Product/Balance'))} />
      <Route path="/eip" component={asyncComponent(() => import('./Product/Eip'))} />
      <Route path="/vpc" component={asyncComponent(() => import('./Product/Vpc'))} />
      <Route path="/ssh" component={asyncComponent(() => import('./Product/Ssh'))} />
      <Route path="/rdb" component={asyncComponent(() => import('./Product/Rdb'))} />
      <Route path="/market" component={asyncComponent(() => import('./Market/Market'))} />
      <Route path="/order" component={asyncComponent(() => import('./Market/Order'))} />
      <Route path="/product" component={asyncComponent(() => import('./Market/Product'))} />
      <Route path="/hadoop" component={asyncComponent(() => import('./Product/Hadoop'))} />
      <Route path="/empty" component={asyncComponent(() => import('./Home/Empty'))} />
      <Route path="/partner" component={asyncComponent(() => import('./Partner'))} />
      <Route path="/help" component={asyncComponent(() => import('./Help'))} />
      <Route path="/about" component={asyncComponent(() => import('./About'))} />
      <Route path="/contract" component={asyncComponent(() => import('./Contract'))} />
      <Route path="/price/:type" component={asyncComponent(() => import('./Price'))} />
      <Route path="/solution/bigdata" component={asyncComponent(() => import('./Solution/BigData'))} />
      <Route path="/solution/micro" component={asyncComponent(() => import('./Solution/Micro'))} />
      <Route path="/solution/internet" component={asyncComponent(() => import('./Solution/Internet'))} />
      <Route path="*" component={asyncComponent(() => import('./Home/Empty'))} />
    </Route>
  </Router>, document.getElementById('root'));

registerServiceWorker();
